<style scoped>
.container{
  background: #f3f3f3;
  width: 100%;
  height: 100%;
}
/*body装饰线条*/
.logo-bar{
  position: relative;
  background-color: #2dbe60;
  height: 4px;
  width: 100%;
  z-index: 3;
}
.tip{
  position: absolute;
  top:5px;
}
/*登录头像*/
.user-info h1{
  color: #6a6a6a;
  font-size: 32px;
  line-height: 36px;
  margin-bottom: 6px;
  font-style: normal;
  font-weight: 300;
}
.user-head{
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  margin: auto;
  margin-top: 50px; 
  align-self: center;
}
.user-head img{
  width: 100%;
  height: 100%;
}
/*登录框*/
.login{
  width: 100%;
  margin-top: 40px;
}
.box-card {
  width: 480px;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 20px;
  transition:5s;
}
.box-card-container{
  margin: 0 15% 0 15%;
}
.login-group{
  margin-bottom: 20px;
  width: 100%;
}
.rememberMe{
  text-align: left;
}
#remember{
  display: inline-block;
  vertical-align: middle;
}
.text-muted{
  font-size: 12px;
  color: #747474;
  display: inline-block;
  margin-bottom: 10px;
}
.login-btn{
  background-color: #2dbe60;
}

</style>
<template>
  <div class="container">
    <div class="logo-bar"></div>
    <transition class="el-zoom-in-top">
       <el-alert class="tip" title="登录信息错误，请验证后重新登录" type="error" center  show-icon v-show="errorShow"></el-alert>
    </transition>
    <div class="user-info">
      <div class="user-head"><img :src="userHead" alt=""></div>
      <h1>登录</h1>
    </div>
    <div class="login">
      <el-card class="box-card">
        <div class="box-card-container">
          <el-input v-model="loginName" placeholder="用户名或编号" class="login-group"></el-input>
          <transition name="slideLeft">
            <div v-show="show"><el-input v-model="loginPwd" placeholder="密码" class="login-group"></el-input></div>
          </transition>
          <div class="rememberMe"><input type="checkbox" name="remember" id="remember" v-model="remember"><span class="text-muted">&nbsp;&nbsp;30天记住我</span><br></div>
          <el-button type="success" class="login-group login-btn" @click="login()">登录</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      userHead:'../src/assets/img/header.jpg',
      msg: 'Welcome to Your Vue.js App',
      loginName: '',
      loginPwd: '',
      remember: false,
      show: false,
      errorShow: false,
    }
  },
  methods:{
    login:function(){
      if(this.loginName!='' && this.show){
          if(this.loginName =='admin' && this.loginPwd =='admin'){
            console.log('login');
            this.$router.push("/index");
          }
      }else{
        this.errorShow=true;
      }
    },
  },
  watch:{
    loginName:function(val,oldVal){
      console.log('现在的文本'+val+"原来的文本"+oldVal);
      if(val!=''){
        this.errorShow=false;
        this.show=true;
      } 
      if(!val){
        this.show=false;
      }
    }
  }
}
</script>
